<!-- 房屋管理 -->
<template>
  <div>
    <div class="header">
      <div class="title">
        <!-- <div style="margin-bottom: 15px; margin-top: 15px">
          <a-space direction="vertical" :size="12">
            <a-input type="primary" />
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <a-space class="search-btn">
            <a-button type="primary">查询</a-button>
          </a-space>
          &nbsp;&nbsp;&nbsp;&nbsp;
          <space style="float: right; margin-right: 10px">
            <a-button type="primary" @click="handleExport"> 导出 </a-button>
          </space>
        </div> -->
      </div>
      <a-table
        :dataSource="tableData"
        :columns="displayColumns"
        :pagination="false"
        :scroll="{ x: 1500, y: tableHeight }"
        bordered
        :loading="loading"
      >
       <!-- vue3 中的写法 -->
       <template #headerCell="{ column }">
          <template v-if="column.key == 'xzq'">
            <Tooltip placement="top">
              <template #title>
                <span>区县名称</span>
              </template>
              <span>区县名称 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'zcount'">
            <Tooltip placement="top">
              <template #title>
                <span>房屋总数</span>
              </template>
              <span> 房屋总数 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'jzrks'">
            <Tooltip placement="top">
              <template #title>
                <span>居住人口数</span>
              </template>
              <span> 居住人口数 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'zzrs'">
            <Tooltip placement="top">
              <template #title>
                <span>租住人数</span>
              </template>
              <span> 租住人数 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'csjyssl'">
            <Tooltip placement="top">
              <template #title>
                <span>3层及3层以上建筑</span>
              </template>
              <span> 3层及3层以上建筑 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'lcjzsl '">
            <Tooltip placement="top">
              <template #title>
                <span>2层建筑数量</span>
              </template>
              <span> 2层建筑数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'fjsl'">
            <Tooltip placement="top">
              <template #title>
                <span>房间数量</span>
              </template>
              <span> 房间数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'jzfjs'">
            <Tooltip placement="top">
              <template #title>
                <span>出租房间数量</span>
              </template>
              <span> 出租房间数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'jzscxyaqcksl'">
            <Tooltip placement="top">
              <template #title>
                <span>建筑首层现有安全出口的数量</span>
              </template>
              <span> 建筑首层现有安全... </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'ssltdbfjsl'">
            <Tooltip placement="top">
              <template #title>
                <span>疏散楼梯达标数量</span>
              </template>
              <span> 疏散楼梯达标数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'sstdywc'">
            <Tooltip placement="top">
              <template #title>
                <span>疏散通道已完成数量</span>
              </template>
              <span> 疏散通道已完成数量</span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'zzzdfa'">
            <Tooltip placement="top">
              <template #title>
                <span>正在制定方案数量</span>
              </template>
              <span> 正在制定方案数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'zzsggz'">
            <Tooltip placement="top">
              <template #title>
                <span>正在施工改造数量</span>
              </template>
              <span> 正在施工改造数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'ckfhwggptzlsl'">
            <Tooltip placement="top">
              <template #title>
                <span>窗口、防护网、广告牌、铁栅栏数量</span>
              </template>
              <span> 窗口、防护网.... </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'bdfwjzrydddzxcsl'">
            <Tooltip placement="top">
              <template #title>
                <span>电动自行车数量</span>
              </template>
              <span> 电动自行车数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'mhqsl'">
            <Tooltip placement="top">
              <template #title>
                <span>灭火器数量</span>
              </template>
              <span> 灭火器数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == ' fytsmz'">
            <Tooltip placement="top">
              <template #title>
                <span>防烟逃生面罩数量</span>
              </template>
              <span> 防烟逃生面罩数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'xggdjsbp'">
            <Tooltip placement="top">
              <template #title>
                <span>悬挂固定警示标牌数量</span>
              </template>
              <span> 悬挂固定警示... </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'jzsyjyplmhxts'">
            <Tooltip placement="top">
              <template #title>
                <span>房屋烟感报警器数量</span>
              </template>
              <span> 房屋烟感报警器数量 </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'wdwhjgfjgqsyyrkrgbdj'">
            <Tooltip placement="top">
              <template #title>
                <span>屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建数量</span>
              </template>
              <span> 屋顶、围护结构... </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'sstdsyyrkrclzx'">
            <Tooltip placement="top">
              <template #title>
                <span>疏散通道使用易燃可燃材料装修数量</span>
              </template>
              <span> 疏散通道使用... </span>
            </Tooltip>
          </template>
          <template v-if="column.key == 'gryssdcsszblyyqksddp'">
            <Tooltip placement="top">
              <template #title>
                <span>供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚南棚等数量</span>
              </template>
              <span> 供人员疏散的场院、内院.... </span>
            </Tooltip>
          </template>
        </template>
      </a-table>
      <Detail
        v-model:visible="visible"
        title="抽屉标题"
        :width="1500"
        :detailTableHeight="detailTableHeight"
        :closable="true"
        :destroyOnClose="true"
        :data="detailData"
        :detailParams="detailParams"
        :currentqx="currentqx"
        :currentTitle="currentTitle"
        @close="handleClose"
      >
        <!-- <p>抽屉内容</p> -->
      </Detail>
      <!-- <BasicTable @register="registerTable">
          <template #id="{ record }"> </template>
      </BasicTable> -->
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { ref, reactive, toRefs, onMounted, onBeforeMount, computed } from 'vue';
  import { getLouDangerList } from '/@/api/demo/system'; //统计工作进展
  import { useUserStore } from '/@/store/modules/user';
  import { iTableData, iTableColumns } from './types/table';
  import { iParams } from './types/params';
  import Detail from './component/detailDrawer.vue';
  import { downloadByUrl } from '/@/utils/file/download';
  import { useGlobSetting } from '/@/hooks/setting';
  let userInfo = ref<any>(null);
  const visible = ref(false);
  let detailData = ref<any[]>([]);
  let detailParams = ref({}); // 详情参数
  let detailTableHeight = ref<number>(0); // 表格高度
  let tableHeight = ref<number>(0); // 表格高度
  let pageIndex = ref(1);
  let pageSize = ref(20);
  const userStore = useUserStore();
  const globSetting = useGlobSetting();
  let data = reactive<{
    tableData: iTableData[];
    tableColumns: iTableColumns[];
    wscolsList: { wch: number }[];
    id: number | any;
    loading: Boolean;
    keyWorld: String;
    currentqx: string; // 当前行政区名称
    currentTitle: string;
    cityToken: string | any;
  }>({
    // 表格数据
    tableData: [],
    tableColumns: [
      {
        title: '序号',
        dataIndex: 'index',
        key: 'index',
        align: 'center',
        width: 130,
      },
      {
        title: '区县名称',
        dataIndex: 'xzq',
        key: 'xzq',
        align: 'center',
        width: 170,
        customCell: (row, index, column) => {
          let isNoHzyh = row.xzq !== '汇总' ? true : false;
          let style = 'cursor:pointer;text-decoration: underline; color: blue;';
          let isNoZero = row[column.key] !== 0 ? true : false;
          return {
            style: `${isNoHzyh === true && isNoZero ? style : ''}`,
            class: 'cell-hover',
            onClick: async () => {
              getDetailData(row, index, column, isNoHzyh, isNoZero);
            },
          };
        },
      },
      {
        title: '房屋总数(栋)',
        dataIndex: 'zcount',
        key: 'zcount',
        align: 'center',
        width: 170,
      },
      {
        title: '居住人口数',
        dataIndex: 'jzrks',
        key: 'jzrks',
        align: 'center',
        width: 170,
      },
      // 居住 商业
      {
        title: '租住人数',
        dataIndex: 'zzrs',
        key: 'zzrs',
        align: 'center',
        width: 170,
      },
      // 居住 商业
      {
        title: '3层及3层以上建筑',
        dataIndex: 'csjyssl',
        key: 'csjyssl',
        align: 'center',
        width: 170,
      },

      //  商业
      {
        title: '2层建筑数量',
        dataIndex: 'lcjzsl',
        key: 'lcjzsl',
        align: 'center',
        width: 170,
      },
      {
        title: '房间数量',
        dataIndex: 'fjsl',
        key: 'fjsl',
        align: 'center',
        width: 170,
      },
      {
        title: '出租房间数量',
        dataIndex: 'jzfjs',
        align: 'center',
        width: 170,
      },
      {
        title: '出租房间数量',
        dataIndex: 'jzfjs',
        align: 'center',
        width: 170,
      },
      {
        title: '疏散楼梯达标数量',
        dataIndex: 'ssltdbfjsl',
        key: 'ssltdbfjsl',
        align: 'center',
        width: 170,
      },
      {
        title: '疏散通道已完成',
        dataIndex: 'sstdywc',
        key: 'sstdywc',
        align: 'center',
        width: 170,
      },
      {
        title: '正在施工改造数量',
        dataIndex: 'zzsggz',
        key: 'zzsggz',
        align: 'center',
        width: 170,
      },
      {
        title: '正在制定方案数量',
        dataIndex: 'zzzdfa',
        key: 'zzzdfa',
        align: 'center',
        width: 170,
      },
      {
        title: '窗口、防护网、广告牌、铁栅栏数量',
        dataIndex: 'ckfhwggptzlsl',
        key: 'ckfhwggptzlsl',
        align: 'center',
        width: 170,
      },
      {
        title: '电动自行车数量',
        dataIndex: 'bdfwjzrydddzxcsl',
        key: 'bdfwjzrydddzxcsl',
        align: 'center',
        width: 170,
      },
      {
        title: '灭火器数量',
        dataIndex: 'mhqsl',
        key: 'mhqsl',
        align: 'center',
        width: 170,
      },
      // 商业
      {
        title: '防烟逃生面罩数量',
        dataIndex: 'fytsmz',
        key: 'fytsmz',
        align: 'center',
        width: 170,
      },
      {
        title: '悬挂固定警示标牌数量',
        dataIndex: 'xggdjsbp',
        key: 'xggdjsbp',
        align: 'center',
        width: 170,
      },
      {
        title: '房屋烟感报警器数量',
        dataIndex: 'jzsyjyplmhxts',
        key: 'jzsyjyplmhxts',
        align: 'center',
        width: 170,
      },
      {
        title: '屋顶、围护结构、房间隔墙使用易燃可燃夹芯彩钢板搭建数量',
        dataIndex: 'wdwhjgfjgqsyyrkrgbdj',
        key: 'wdwhjgfjgqsyyrkrgbdj',
        align: 'center',
        width: 250,
      },
      {
        title: '疏散通道使用易燃可燃材料装修数量',
        dataIndex: 'sstdsyyrkrclzx',
        key: 'sstdsyyrkrclzx',
        align: 'center',
        width: 250,
      },
      {
        title: '供人员疏散的场院、内院、天井设置不利于烟气扩散的顶棚南棚等数量',
        dataIndex: 'gryssdcsszblyyqksddp',
        key: 'gryssdcsszblyyqksddp',
        align: 'center',
        width: 250,
      },
    ],
    id: null,
    loading: true,
    keyWorld: '',
    cityToken: '', // 判断是不是市区 110000 是北京市 展示搜索宽
    currentqx: '', // 当前行政区名称
    currentTitle: '', // 当前详情标题
    wscolsList: [{ wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }, { wch: 15 }],
  });
  // 表格的 ref Dom名称
  let { tableData, loading, currentqx, currentTitle } = toRefs(data);
  async function getData() {
    const { role } = userInfo.value;
    let groupname = '';
    if (role === 'City') {
      groupname = 'qxmc';
    } else if (role === 'Area') {
      groupname = 'jzmc';
    } else if (role === 'Street') {
      groupname = 'czmc';
    }
    let params: iParams = {
      groupname: groupname,
    };
    // console.log('@市级参数', params);
    loading.value = true;
    let res: any = await getLouDangerList(params);
    console.log('@res--工作进入汇总表', res);

    if (res || res.items.length > 0) {
      loading.value = false;
      res.items.forEach((item: any, index: number) => {
        // item.name = selectClassFlyDict(item.xzqdm);
        item.index = index + 1;
      });
      // console.log('data', data);
      // 算列和
      let bullding_count = total(res.items, 'zcount');
      let jzrks_count = total(res.items, 'jzrks');
      let zzrs_count = total(res.items, 'zzrs');
      let index_count = res.items.length + 1;
      let three_cs_count = total(res.items, 'csjyssl');
      let two_cs_count = total(res.items, 'lcjzsl');
      let fjsl_count = total(res.items, 'fjsl');
      let jzfjs_count = total(res.items, 'jzfjs');
      let ywc_sstd_count = total(res.items, 'sstdywc');
      let wcc_sstd_zdfa_count = total(res.items, 'zzzdfa');
      let wcc_sstd_sgzg_count = total(res.items, 'zzsggz');
      let ckfhwggptzlsl_count = total(res.items, 'ckfhwggptzlsl');
      let bdfwjzrydddzxcsl_count = total(res.items, 'bdfwjzrydddzxcsl');
      let mhqsl_count = total(res.items, 'mhqsl');
      let fytsmz_count = total(res.items, 'fytsmz');
      let xggdjsbp_count = total(res.items, 'xggdjsbp');
      let jzsyjyplmhxts_count = total(res.items, 'jzsyjyplmhxts');
      // 商业
      let jzszlwxdlgybjqs_count = total(res.items, 'jzszlwxdlgybjqs');
      let wdwhjgfjgqsyyrkrgbdj_count = total(res.items, 'wdwhjgfjgqsyyrkrgbdj');
      let sstdsyyrkrclzx_count = total(res.items, 'sstdsyyrkrclzx');
      let gryssdcsszblyyqksddp_count = total(res.items, 'gryssdcsszblyyqksddp');
      let allObj = {
        xzq: '汇总',
        zcount: bullding_count,
        jzrks: jzrks_count,
        zzrs: zzrs_count,
        index: index_count,
        csjyssl: three_cs_count,
        lcjzsl: two_cs_count,
        fjsl: fjsl_count,
        jzfjs: jzfjs_count,
        sstdywc: ywc_sstd_count,
        zzzdfa: wcc_sstd_zdfa_count,
        zzsggz: wcc_sstd_sgzg_count,
        ckfhwggptzlsl: ckfhwggptzlsl_count,
        bdfwjzrydddzxcsl: bdfwjzrydddzxcsl_count,
        fytsmz: fytsmz_count,
        xggdjsbp: xggdjsbp_count,
        jzsyjyplmhxts: jzsyjyplmhxts_count,
        jzszlwxdlgybjqs: jzszlwxdlgybjqs_count,
        wdwhjgfjgqsyyrkrgbdj: wdwhjgfjgqsyyrkrgbdj_count,
        sstdsyyrkrclzx_: sstdsyyrkrclzx_count,
        gryssdcsszblyyqksddp: gryssdcsszblyyqksddp_count,
        mhqsl: mhqsl_count,
      };
      data.tableData = [...res.items, allObj];
    }
  }
  // 计算总数的方法
  function total(arr: any, item: any) {
    let total = arr.reduce((pre: any, cur: any) => {
      return parseInt(pre) + parseInt(cur[item]);
    }, 0);
    return total;
  }

  const getDetailData = async (
    row: any,
    index: number,
    column: any,
    isNoHzyh: boolean,
    isNoZero: boolean,
  ) => {
    if (isNoHzyh && isNoZero) {
      let params: iParams = {
        groupbyLever_code: row.xzqdm,
        groupbyLever_code_project: column.key,
        xzq: row.xzq,
      };
      detailParams.value = params;
      data.currentTitle = row.xzq;
      showDrawer();
    }
  };

  // 打开抽屉
  function showDrawer() {
    visible.value = true;
  }
  function handleClose() {
    visible.value = false;
  }
  function handleExport() {
    const uriBase = `${globSetting.apiBaseUrl}${globSetting.apiUrl}`;
    const tk = userStore.getToken;
    downloadByUrl({
      url: `${uriBase}/houses/basestatic/ExportExcel?access_token=${tk}`,
      target: '_blank',
    });
  }
  function getUserInfo() {
    const userStore = useUserStore();
    userInfo.value = userStore?.getUserInfo;
  }
  const displayColumns = computed(() => {
    const { role } = userInfo.value;
    let arr: any[] = [];
    if (role === 'City') {
      // qx
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'czmc');
      return arr;
    } else if (role === 'Area') {
      // jz
      arr = data.tableColumns.filter((item) => item.key !== 'czmc' && item.key !== 'qxmc');
      return arr;
    } else if (role === 'Street') {
      // cun
      arr = data.tableColumns.filter((item) => item.key !== 'jzmc' && item.key !== 'qxmc');
      console.log('@Aarr', arr);
      return arr;
    } else {
      return data.tableColumns;
    }
  });
  const getTableHeight = () => {
    setTimeout(() => {
      // detailTableHeight.value = window.innerHeight - 182;
      // tableHeight.value = window.innerHeight - 292;
      detailTableHeight.value = window.innerHeight;
      tableHeight.value = window.innerHeight;
      // console.log(`表格高度`, tableHeight.value);
    });
  };
  onBeforeMount(() => {
    getUserInfo();
  });
  onMounted(() => {
    console.log('******基本信息统计初始化******');
    getData();
    getTableHeight();
  });
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
  #map {
    height: calc(100vh - 140px);
  }

  .x-houseMng-search {
    z-index: 100;
    margin: 6px;
    position: absolute;
  }

  .root-house-mng-main {
    margin: 6px;
  }

  .x-village-tabs {
    //z-index: 100;
    //position: absolute;
    width: 60vw;
    margin-top: 6px;
    margin-left: 40px;
    //background-color: rgba(34, 34, 34, 0.6);
    :deep(.ant-form) {
      margin-top: 6px;
    }

    // :deep(.ant-form-item-label) > label {
    //   color: white;
    // }
  }
</style>
